window.onload = function() {
	//获取元素
	//01 获取上半部分盒子
	var tab_top = document.querySelector('.dl_hd');
	//02 获取上班部分 所有小li 得到一个数组
	var spans = tab_top.querySelectorAll('span');
	//03 获取下半部分 所有小div盒子 得到一个数组
	var nr = document.querySelectorAll('.dl_nr');
	//for 循环所有小li 绑定点击事件
	for (var i = 0; i < spans.length; i++) {
		//开始给上面li设置索引号 属性index 值 i 
		spans[i].setAttribute('index', i);
		// 注册点击事件
		spans[i].onclick = function() {
			// 来个排他思想
			for (var j = 0; j < spans.length; j++) {
				//先让所有的li 点击没有样式
				spans[j].className = '';
			}
			// 谁点击 谁加样式
			this.className = 'on';
			//2 下面显示内容模块也要写在onclick里面 因为一一对应
			// 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性
			var index = this.getAttribute('index');
			for (var k = 0; k < nr.length; k++) {
				//所有的小div 隐藏
				nr[k].style.display = 'none';
			}
			//点击哪个小li 小li的index对应的div 显示
			nr[index].style.display = 'block';
		}
	}
}




	